<template>
  <div>
    <m-head title="设置密码"></m-head>
    <div class="form">
    <div>
      <span>新密码</span>
      <input type="password" v-model="password" autofocus>
    </div>
    <div>
      <span>确认密码</span>
      <input type="password" v-model="passwordOk">
    </div>
    <p>密码必须是8-16位字母、数字组合(不能使纯数字)</p>
    <button @click="changePwd">保存</button>
    </div>
  </div>
</template>

<script>
import MHead from './MHeader'
import * as user from '../api/user'
export default {
  name: 'binding',
  components: {
    'm-head': MHead
  },
  data () {
    return {
      password: '',
      passwordOk: ''
    }
  },
  mounted () {
  },
  methods: {
    changePwd () {
      let that = this
      if (that.password !== that.passwordOk) {
        alert('两次密码不一致')
        return
      }
      user.updateUser({passwd: that.password}).then(res => {
        if (res.code == 200) {
          alert('修改成功')
          that.$router.push('account')
        } else {
          alert(res.msg)
        }
      })
    }
  },
}
</script>

<style scoped>
.form{
  padding: .5rem .8rem;
}
.form div{
  display: flex;
  align-items: center;
  font-size: .4rem;
  margin-bottom: .3rem;
}
.form div input{
  height: .8rem;
  display: block;
  border-bottom: 1px solid #eee;
  padding-left: .3rem;
  flex-grow: 1;
}
.form div span{
  display: block;
  flex-shrink: 0;
  width: 2.2rem;
}
.form input:focus{
  outline: 0;
}
.form p{
}
.form button{
  display: block;
  width: 4rem;
  height: .8rem;
  line-height: .8rem;
  color: #fff;
  background: #007aff;
  border: none;
  margin: 2rem auto;
}
</style>
